<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div id="main"></div>
</body>
<script>
    (function () {
        var obj = {
            name: "My tree",
            childer: [{
                name: "hello",
                childer: [{
                    name: "hellohahah"
                }, {
                    name: "wathaha",
                    childer: [{
                        "name": "jlsdjlkdjlsakdj",
                        childer: [{
                            "name": "adasdlja879789sad"
                        }]
                    }]
                }]
            }, {
                name: "wat",
                childer: [{
                    name: "hellohahah",
                    childer: [{
                        name: "7839247293hdjf",
                        childer: [{
                            "name": "adasdlja879789sad",
                            childer: [{
                                "name": "adasdlja879789sad",
                                childer: [{
                                    "name": "adasdlja879789sad"
                                }]
                            }]
                        }]
                    }, {
                        name: "sadjl8999aj"
                    }]
                }, {
                    name: "wathaha"
                }]
            }, {
                name: "child folder",
                childer: [{
                    name: "hello2uuhuhuiuhi"
                }, {
                    name: "watasjdoiusdfoi"
                }]
            }]
        };

        var main = document.getElementById('main');

        var createDomTree = function (obj,container) {

            //hNum为1也行，后面hNum++
            var hNum = "&nbsp";
            var tpl = "";
            var p1 = "<p>";
            var p2 = "</p>";

            var creatDom = function (objChilder, hNum) {
                for (var i = 0; i < objChilder.length; i++) { //循环3次
                    (function (hNum) {
                        var item = objChilder[i];
                        for (var j in item) {
                            (function (hNum) {
                                if (j == "name") {
                                    tpl+=p1+hNum+item[j]+p2;
                                }
                                if (item[j] instanceof Array) {
                                    hNum += "&nbsp";
                                    creatDom(item[j], hNum);
                                }
                            })(hNum);
                        }
                    })(hNum);
                }
            }

            var arr = [];
            arr.push(obj);
            creatDom(arr, hNum);
            container.innerHTML = tpl;

        }

        createDomTree(obj,main);

    })();
</script>

</html>